$(function(){
    var url = 'http://47.108.197.28:8000/city';
    var historys = [];
    $("#input").keyup(function(e){
      
    if(e.keyCode==13&&$(this).val()!=''){
        var value = $(this).val()
      
        Add(value);
      
    }
      
})
function Add(value){
    var template = `
    <button>${value}</button>
    `
    if(!historys.includes(value)){
        historys.unshift(value)
        $(".ask ul button:first-child").after(template)
    }
    else{
        var index = historys.indexOf(value);
        // console.log(index)
        historys.splice(index,1)
        $(".ask ul button").eq(index+1).remove();
        historys.unshift(value);
        $(".ask ul button:first-child").after(template)
    }
}
$ajax({
    url,
    success:res=>{
        var data = res.data;
        var hotCities = res.data.hotCities;
        var cities = res.data.cities
        // console.log(hotCities)
        hotCities.forEach(item => {
            var {name} =item;
            var btn = `
            <button>${name}</button>
            `
            $(".city").append(btn)
            var btns =  $(".city button");
            btns.click(function(){
               var val = $(this).text();
                Add(val)
            })
            
        });
        for( k in cities){
            var A_city=`
            <p id="${k}">${k}</p>
            `
            var A = `
            <p><a href="#${k}">${k}</a></p>
            `
            $(".letter").append(A)
            $(".content").append(A_city)
            cities[k].forEach(item=>{
                var {name} = item;
                var text = `
                <p class = "text">${name}</p>
                `
                $(".content").append(text)
            })
        }
      
    }
  
})
  
})